// 初始化echart实例对象
//
var right1Chart = echarts.init(document.getElementById('right1'), 'dark');


// ----------右1的配置项-------------------
var option = {
    title: {
        text: "全国确诊省市TOP10",
        textStyle: {
            color: 'white',
        },
        left: 'left'
    },
    color: ['#3398DB'],
    tooltip: {
        trigger: 'axis',
        //指示器
        axisPointer: {
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    xAxis: {
        type: 'category',
        data: [] // ['湖北','广州','北京']
    },
    yAxis: {
        type: 'value',
        //y轴字体设置
        axisLabel: {
            show: true,
            color: 'white',
            fontSize: 12,
            formatter: function(value) {
                if (value >= 1000) {
                    value = value / 1000 + 'k';
                }
                return value;
            }
        },
    },
    series: [{
        data: [], // [582, 300, 100]
        type: 'bar',
        barMaxWidth: "50%"
    }]
};

// 发送请求获取数据
$.get("http://localhost:8080/national-provinces/topConfirmProvinces", function (res) {
    console.log("顶部数据");
    console.log(res);

    // 处理返回的数据
    var provinces = [];
    var confirms = [];

    // 假设后端返回的数据是一个数组，每个元素包含 'province' 和 'confirm' 属性
    for (var data of res) {
        provinces.push(data.province);
        confirms.push(data.confirm);
    }

    // 更新图表数据
    option.xAxis.data = provinces;
    option.series[0].data = confirms;

    // 使用刚指定的配置项和数据显示图表。
    right1Chart.setOption(option);

    // 更新页面顶部数据展示
    document.getElementById('confirm').innerText = res[0].confirm;
    // 如果还有其他的展示数据，按照类似的方式更新
});